<template>
  <div class="detail-grid" v-loading="loading">
    <order-info :form="form"></order-info>
    <product-info :form="form"></product-info>
  </div>
</template>
<script>
import OrderInfo from './Components/OrderInfo'
import ProductInfo from './Components/ProductInfo'
import { getMyOrderDetail } from '@/api/order'
import { OrderDetailDTO } from './options'
export default {
  components: {
    OrderInfo,
    ProductInfo
  },
  data () {
    return {
      form: OrderDetailDTO(),
      loading: false
    }
  },
  computed: {
    id () {
      return this.$route.params.id
    }
  },
  methods: {
    async loadPage () {
      this.loading = true
      this.$http({
        url: this.$http.adornUrl(getMyOrderDetail(this.id).url),
        method: getMyOrderDetail(this.id).method
      }).then(({ data }) => {
        if (data.data) {
          this.form = Object.assign({}, OrderDetailDTO(), data.data)
        }
        this.loading = false
      })
    }
  },
  created () {
    this.loadPage()
  }
}
</script>
<style lang="scss" scoped>
.detail-grid {
  display: grid;
  grid-template-rows: fit fit fit;
  gap: 20px;
}
</style>